<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点语法操作Dom节点元素</title>
    <style>
        .hide{
            font-size: 20px;
        }
        .reds{
            color: red;
        }
    </style>
</head>
<body>
    <div>Jimmy</div>
    <div>studio</div>
</body>
<script>
    let divs = document.querySelectorAll('div')

    /*
        如下代码会报错，原因为map不是一个方法
            其实会这样是因为map是数组的一个方法  而现在的divs是dom结点还不是数组  所以要完成这个功能要先将divs转换为数组
    */
    try{
        divs.map(item=>{
            item.addEventListener('click',()=>{
                alert('hello')
            })
        })
    }catch{
        
    }
    
    // 使用...args  是将参数集合起来 因为我们是要转换成为一个数组  所以需要使用到 [] 包裹起来才能够算是一个数组
    [...divs].map(item=>{
        item.addEventListener('click',()=>{
            //  toggle是开关的意思  就是点击一下就开  点击一下关  来回之间的跳转
            item.classList.toggle('hide')
        })
    })

    // 老方法使用array.from   array.form也是将其他元素转换为数组  ，还能够传递一个回调函数
    Array.from(divs,item=>{
        item.addEventListener('click',()=>{
            item.classList.add('reds')
        })
    })

</script>
</html>